<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>ref为引用数据类型obj：{{ obj }}</p>
    <p>直接结构出来的值：{{ name }}---{{ age }}</p>
    <button @click="obj.age++">修改obj内部age的值</button>
    <button @click="obj.name+=1">修改obj内部name的值</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import {ref, toRefs} from "vue";
// ts 类型限制
type scoreType = {
  ch: number[],
  math: number[]
}

interface ObjType {
  name: string,
  age: number,
  sex: string,
  hobby: string[],
  score: scoreType
}

const obj = ref<ObjType>({
  name: '李四',
  age: 12,
  sex: '男',
  hobby: ['唱', '跳', 'rap'],
  score: {
    ch: [1, 2, 3, 4],
    math: [2, 3, 4, 5]
  }
})

// 直接解构获取 obj 的值   ----> 结果 发现没有响应式
// const {name, age} = obj.value

// 通过 toRefs 函数解构   ----> 结果  数据有响应式
const {name, age} = toRefs(obj.value)

</script>
